<template>
  <div>
    <el-form ref="form" class="timeForm" :model="form">
      <div class="head">
        <span>精准时段配置</span>
        <el-button v-if="timeGrade.length===0" type="text" @click="add">新增</el-button>
        <el-button v-if="timeGrade.length>0" type="text" @click="edit">修改</el-button>
        <el-button type="text" @click="logConfig">配置日志</el-button>
      </div>

      <el-form-item v-for="(ele,index) in timeGrade" :key="index">
        <el-time-select
          v-model="ele.startTime"
          format="HH:mm"
          disabled
          value-format="HH:mm"
          placeholder="开始时间"
        />
        <span class="to"> ~ </span>
        <el-time-select
          v-model="ele.endTime"
          disabled
          format="HH:mm"
          value-format="HH:mm"
          placeholder="结束时间"
        />

        <span>（不包含）</span>
      </el-form-item>
    </el-form>
    <preciseTimeLog ref="preciseTimeLog" />
    <preciseTimeAdd ref="preciseTimeAdd" />
  </div>
</template>

<script>
  import preciseTimeLog from './components/preciseTimeLog'
  import preciseTimeAdd from './components/preciseTimeAdd'
  import { mapGetters } from 'vuex'
  import { appointTimeSettingQuery } from '@/api'
  import dayjs from 'dayjs'

  export default {
    name: 'preciseTime',
    components: { preciseTimeLog, preciseTimeAdd },
    data() {
      return {
        form: {
          name: ''
        },
        timeGrade: [],
        formSave: {}
      }
    },
    computed: {
      ...mapGetters([
        'corpSettingData'
      ])
    },
    created() {
      this.getTimePeriod()
    },
    methods: {
      async getTimePeriod() {
        const res = await appointTimeSettingQuery()
        if (res && res.data) {
          this.timeGrade = res.data.map((item) => ({
            startTime: dayjs(item.startTime).format('HH:mm'),
            endTime: dayjs(item.endTime).format('HH:mm')
          }))
        }
      },
      logConfig() {
        this.$refs.preciseTimeLog.open()
      },
      async add() {
        this.formSave = await this.$refs.preciseTimeAdd.open()
        console.log(this.formSave, '----------')
        this.timeGrade = this.timeMap(this.formSave.timeGrade)
      },
      async edit() {
        this.formSave = await this.$refs.preciseTimeAdd.open(this.timeGrade)
        this.timeGrade = this.timeMap(this.formSave.timeGrade)
      },
      timeMap(list) {
        if (list && list.length > 0) {
          return list.map((item) => ({
            startTime: item.start,
            endTime: item.end
          }))
        } else {
          return []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.head {
  margin-bottom: 20px;
  /deep/ .el-button {
    margin-left: 20px;
    font-size: 14px;
    &:nth-child(4) {
      margin-left: 40px;
    }
  }
  span {
    font-size: 18px;
    font-weight: 800;
  }
}
.to {
  margin: 0 10px;
}

</style>
